<template>
  <el-input
    class=""
    :class="{ dropActive1: dropActive }"
    @drop="onDropCompressPath"
    @dragover="onDragOverCompressPath"
    @dragenter="onDragEnterCompressPath"
    @dragleave="onDragLeaveCompressPath"
    v-model="compressPath"
    placeholder="输入本地文件或目录地址"
  />
  <el-input v-model="outPath" placeholder="输出目录，不填则替换原有文件" />

  <el-button @click="compress">压缩图片</el-button>
  <el-button @click="clearCache">清除缓存</el-button>
  <div class="console">
    <p v-for="(info, index) in infoList" :key="index">{{ info }}</p>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ElMessage } from "element-plus";

const fs = window.require("fs");
const process = window.require("process");
const tinypngwrapper = (window as any).tinypngwrapper;

const electron = window.require("electron");

export default class TinyPng extends Vue {
  infoList: string[] = [];

  compressPath = "";
  outPath = "";

  compress() {
    this.infoList = [];
    if (!fs.existsSync(this.compressPath)) {
      ElMessage("文件或目录不存在");
      return;
    }
    if (this.outPath && !fs.existsSync(this.outPath)) {
      ElMessage("请输入正确的输出目录");
      return;
    }
    this.infoList.unshift("开始压缩...");

    tinypngwrapper
      .compress(
        this.compressPath,
        this.outPath,
        (result: { filePath: string; code: number }) => {
          //console.log(result);
          this.infoList.unshift(`已处理：${result.filePath}`);
        }
      )
      .then((result: any) => {
        //console.log("aaaaaaaaaaaaaa", result);
        this.infoList.unshift(
          `压缩完毕，总数量：${result.total},成功：${result.success}`
        );
        ElMessage({
          message: "压缩完成",
          type: "success",
        });
      });
    // robotjs_ipc.compress(this.compressPath);
  }

  compressImg(){

  }

  clearCache() {
    tinypngwrapper.clearAllCache();
    this.infoList=["缓存图片已清理"]
    ElMessage({
      message: "缓存图片已清理",
      type: "success",
    });
  }
  dropActive = false;
  onDragLeaveCompressPath(e: any) {
    e.stopPropagation();
    e.preventDefault();
    this.dropActive = false;
  }
  onDragEnterCompressPath(e: any) {
    console.log("enter");
    
    e.stopPropagation();
    e.preventDefault();
    this.dropActive = true;
  }
  onDragOverCompressPath(e: any) {
    e.stopPropagation();
    e.preventDefault();
    this.dropActive = true;
  }
  onDropCompressPath(e: any) {
    var df = e.dataTransfer;
    var dropFiles = []; // 存放拖拽的文件对象
    if (df.items !== undefined) {
      // Chrome有items属性，对Chrome的单独处理
      for (var i = 0; i < df.items.length; i++) {
        var item = df.items[i]; // 用webkitGetAsEntry禁止上传目录
        if (item.kind == "file") {
          var file = item.getAsFile();
          console.log(item);
          if (item.webkitGetAsEntry()) {
            if (item.webkitGetAsEntry().isFile) {
              dropFiles.push({ type: "file", path: file.path });
            } else {
              dropFiles.push({ type: "folder", path: file.path });
            }
          }
        }
      }
    }
    console.log(dropFiles);
    if(dropFiles&&dropFiles.length>0){
      this.compressPath=dropFiles[0].path
    }
    // this.compress()
    

    this.dropActive = false;
    e.stopPropagation();
    e.preventDefault();
  }
}
</script>

<style scoped>
.console {
  max-height: 150px;
  overflow-y: scroll;
}
.dropActive1 {
  background-color: red;
  border-color: red;
}
</style>
